<template>
  <div class="page-card handle-event">
    <h-query
      :showKey="['startTime,endTime','title']"
      :query="query"
      format="YYYY-MM-DD"
      :defaultValueDate="defaultValueDate"
      @search="search">
      <!-- <a-button type="primary" class="a-button-right" style="margin: 6px 0 0 0" @click.stop="add">添加指令</a-button> -->
    </h-query>
    <a-row :gutter="[20,20]">
      <a-col :span="8" v-for="(item, i) in list" :key="i">
        <div class="handle-event--card">
          <h1 class="ellipsis-2">{{ item.title | htmlFilter }}</h1>
          <p class="tags">
            <a-tag color="blue" style="opacity: 0">数据收集中</a-tag>
            <a-button class="tags-btn" type="primary" @click="toURL(item)">修改</a-button>
          </p>
          <div class="dataview-com-text">
            <a-row :gutter="20" >
              <a-col :span="12">
                <p>创建时间</p>
                <p v-if="item.createTime">{{ moment(item.createTime).format('YYYY-MM-DD') }}</p>
              </a-col>
              <a-col :span="12">
                <p>最新执行时间</p>
                <p v-if="item.updateTime">{{ moment(item.updateTime).format('YYYY-MM-DD') }}</p>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-col>
    </a-row>
    <div class="hlist-pagination" style="">
      <a-pagination v-model="current" v-bind="paginationConfig" @change="change" />
    </div>

    <createPlane ref="createPlane" v-model="show" @submit="submit" />
  </div>
</template>

<script>
import SvgIcon from '@/components/SvgIcon';
import createPlane from './action/createPlane';
import { getSendInstructions } from '@/api/serve';
import moment from 'moment';
export default {
  components: {
    SvgIcon,
    createPlane
  },
  data() {
    return {
      moment,
      defaultValueDate: {
        value: moment().format('YYYY-MM-DD')
      },
      query: [
        // {
        //   key: 'name',
        //   type: 'input',
        //   label: 'xxxxxx事件名称'
        // },
        // {
        //   key: 'createTime',
        //   type: 'date',
        //   label: '添加时间'
        // }
      ],
      show: false,
      current: 1,
      paginationConfig: {
        current: 1,
        pageSize: 10,
        total: 100
      },
      list: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    search(params) {
      if (params) {
        Object.assign(this.queryParams, params);
      }
      this.getList();
    },
    change(page) {
      this.queryParams.pageNo = page;
      this.paginationConfig.current = page;
      this.getList();
    },
    submit() {
      this.show = false;
    },
    add() {
      this.show = true;
    },
    getList() {
      getSendInstructions(this.queryParams).then(res => {
        this.list = res.data.records;
        this.paginationConfig.total = res.data.total;
      });
    },
    toURL({ id, title }) {
      this.$router.push({ path: '/insPlan/detail', query: { id, title } });
    }
  }
};
</script>

<style scoped lang="less">
  h1,p {
    margin: 0;
  }
  .handle-event {
    .a-button-blue {
      position: absolute;
      right: 0;
      top: 0;
    }
    .handle-event--card {
      background: #FFFFFF;
      box-shadow: 0px 0px 20px 0px rgba(20,15,41,0.1000);
      padding: 20px 20px;
      position: relative;
      border-radius: 10px;
      // padding-bottom: 93px;
      h1 {
        font-size: 20px;
        font-weight: 500;
        color: #333333;
        height: 60px;
      }
      >p.tags {
        margin-top: 8px;
        // color: #999;
        border-bottom: 1px solid #ddd;
        padding-bottom: 20px;
      }
      .tags-btn {
        float: right;
        margin-top: -5px;
      }
      >p {
        font-size: 15px;
        font-weight: 400;
        color: #999999;
        line-height: 1.5;
        margin-top: 8px;
      }
      .handle-event--footer {
        margin-top: 20px;
        p {
          font-size: 14px;
          font-weight: 400;
          color: #999;
        }
      }
      .handle-event--tip {
        position: absolute;
        right: 0;
        top: 0;
        width: 110px;
        height: 36px;
        color: #fff;
        text-align: center;
        text-indent: 4px;
        line-height: 36px;
        font-size: 12px;
      }
    }
    .handle-event--content {
      min-height: 60px;
    }
    .handle-event--btn {
      margin-top: 16px;
      text-align: right;
    }

    .hlist-pagination {
      margin: 20px 0;
      text-align: center;
      margin-top: 80px;
    }

    .dataview-com-text {
      // text-align: center;
      font-size: 16px;
      color: #999;
      margin-top: 20px;
      margin-left: -10px;
      p:nth-child(2) {
        font-size: 24px;
        color: #333;
        font-weight: 600;
      }
    }
  }
</style>
